<template>
  <div class="risk">
    <van-search
      class="info_search"
      v-model="value"
      placeholder="搜索"
      @search="onSearch"
      @clear="onSearch"
    />
    <van-list
      :finished="myFinished"
      v-model="myLoading"
      finished-text="没有更多了"
      @load="myOnLoad"
    >
      <van-cell
        class="card"
        v-for="(item, index) in myList"
        :key="index"
      >
        <div class="warn_item">
          <van-tag v-if="item.Status == 0" class="info_tag" color="grey"
            >未开始</van-tag
          >
          <van-tag
            v-if="item.Status == 10 && !item.IsExpire"
            class="info_tag"
            color="#1989fa"
            >进行中</van-tag
          >
          <van-tag v-if="item.Status == 20" class="info_tag" type="warning"
            >已结束</van-tag
          >
          <van-tag
            v-if="item.Status == 10 && item.IsExpire"
            class="info_tag"
            type="danger"
            >已过期</van-tag
          >

          <div @click="goDetail(item)">
            <van-row>
              <van-col span="24">
                {{ index + 1 }}、{{ item.CheckTaskName }}</van-col
              >
            </van-row>
            <!-- <div class="dep_sort">
                  <img src="@/assets/Images/AppIcon/icon_list_org.png" alt="" />
                  <div>{{ item.CheckTypeName }}</div>
                </div> -->
            <van-row gutter="20" class="dep_sort">
              <van-col span="12">
                <img src="@/assets/Images/AppIcon/icon_list_type.png" alt="" />{{
                  item.CheckTypeName
                }}</van-col
              >
              <van-col span="12">
                <img
                  src="@/assets/Images/AppIcon/icon_list_danger.png"
                  alt=""
                />隐患/检查：{{ item.HiddenDangerCnt }}/{{
                  item.CheckCnt
                }}</van-col
              >
            </van-row>

            <van-row gutter="20" class="dep_sort">
              <van-col span="12">
                <img
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                  alt=""
                />{{ item.CreateChnName }}</van-col
              >
            </van-row>

            <van-row gutter="20" class="dep_sort">
              <van-col span="24">
                <img
                  src="@/assets/Images/AppIcon/icon_list_date.png"
                  alt=""
                />{{ item.StartDate|formatDate }}至{{ item.EndDate|formatDate }}</van-col
              >
            </van-row>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { list } from "@/api/sytech/sytechDangerCheckTask";
import { getDateTime } from "@/utils/getDate";

export default {
  data() {
    return {
      active: 0,
      value: "",
      myList: [],
      selectKey: "",
      myCount: 0,
      myFilter: {
        page: 0,
        dataType: "Plan",
        CPCode: this.$route.query.CPCode,
      },

      myLoading: false,
      myFinished: false,
    };
  },
  created() {
    this.getMyList();
  },
  filters: {
    formatDate: function (value, args) {
      return getDateTime(value);
    },
  },
  methods: {
    onSearch() {
      var conditions = [];
      if (this.value) {
        conditions.push({
          Name: "Keywords",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }
      this.myFilter.conditions = JSON.stringify(conditions);
      this.getMyList();
    },
    getMyList() {
      this.myLoading = true;
      list(this.myFilter).then((res) => {
        this.myLoading = false;
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
        this.myList = res.data.Data;
        this.myCount = res.data.TotalCount > 99 ? "99+" : res.data.TotalCount;
        this.myFilter.page = res.data.PageIndex;
      });
    },

    myOnLoad() {
      this.myLoading = true;
      ++this.myFilter.page;
      list(this.myFilter).then((res) => {
        this.myLoading = false;
        this.myFilter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
      });
    },

    // 设备详情
    goDetail(item) {
      this.$router.push({
        path: "/SytechDanger/CheckPlanFollowDetail",
        query: { id: item.ID },
      });
    },

    // 设备详情
    goFinishDetail(item) {
      this.$router.push({
        path: "/SytechDangerCheckTaskView",
        query: { id: item.ID },
      });
    },

    getFile(equipmentCode) {
      this.$router.push({
        path: "/Equipment/safetyfile",
        query: { equipmentCode: equipmentCode },
      });
    },
    // 编辑设备信息
    edit(equipmentCode) {
      this.$router.push({
        path: "/Equipment/Edit",
        query: { equipmentCode: equipmentCode },
      });
      this.$router.push("");
    },
    // 设备检验
    editCheck(equipmentCode) {
      this.$router.push({
        path: "/Equipment/editcheck",
        query: { equipmentCode: equipmentCode },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
  }
}
.all_dep {
  background-color: #ffffff;
}
.van-cell {
  padding: 0 0;
  .info_tag {
    position: absolute;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    top: 0;
    right: 0;
  }
}
.warn_item {
  padding: 10px;
  // padding: 10px 0 10px 10px;
  border-radius: 5px;
  position: relative;
}
.warn_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  .warn_tag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}
.dep_sort {
  // display: flex;
  // flex-wrap: wrap;
  // margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}
</style>
